<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>瀑布流</title>
	<script src="./jquery-1.8.3.min.js"></script>
	<style>
	*{margin:0;padding: 0;list-style: none;}
		ul{
			width:25%;
			/*height: 2000px;*/
			border:1px solid  red ;
			float: left;
			box-sizing: border-box;
		}
		ul li{
			width: 90%;
			height:350px;
			border:1px solid green;
			margin:0 auto;
			text-align: center;


		}
	</style>
</head>
<body>
	<li style="display: none" >
		<img src="./images/05bb0203db64c3cfea040ffb05e2e73c.jpg" alt="" height=293>
		<h3>商品信息</h3>
		<p>商品价格</p>
	</li>	
	<ul>

	</ul>
	<ul></ul>
	<ul></ul>
	<ul></ul>

	<script>
	//声明一个变量 用于标志取片范围
	p=1
	//加载完页面后先调用一次
	RequetDate();

	//添加滚动事件
	$(window).scroll(function(){
		//判断滚动条是否触底 当前文档的高度=文档的偏移位置 + 窗口的高度
		//获取文档的高度
		var Dh=$(document).height();
		//获取文档的偏移位置
		var Fh=$(document).scrollTop();
		//窗口的高度
		var Wh=$(window).height();

		// 判断滚动条是否触底
		if (Dh==Fh+Wh){
			//触底发送ajax请求新数据
			RequetDate();
		}

	})

	function RequetDate(){
		//加载完页面后发送ajax
		$.ajax({
			url:"./cgi-bin/goods.py",
			data:{P:p},
			type:"get",

			dataType:"json",
			success:function(data){
				// console.log(data)
				// 遍历获取的数据
				for (i in data){

					//克隆li
					var el=$("li:first").clone();

					el.find("img").attr('src',data[i].pic);
					el.find("h3").html(data[i].id+data[i].title);
					el.find("p").html(data[i].price)
					el.css("display","block");


					//将克隆的li放入ul
					$("ul").eq(i%4).append(el);
				}
			p++;
			}
		})
	}

	</script>
</body>
</html>